import React from 'react'
import { View, Text, StyleSheet, Image, TextInput, Button} from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { Header } from '../../components'
import { pxToPt } from '../../utils/pxToPt'

export default function index({navigation}) {
  return (
    <View style={styles.wrapper}>
    <View style={styles.container} >  
        <View style={styles.header}>
          <Header
            LeftIcon='ZUO'
            leftPress={()=> {navigation.goBack()}}
          />
        </View>
      
       <Text style={styles.title}>
       Find the password
       </Text>
      <View style={styles.form}>
        
        <View style={styles.formItem}>
          <Text style={styles.label}>email</Text>
          <View style={styles.theHidden}></View>
          <TextInput textContentType='emailAddress' keyboardType='number-pad' maxLength={11}  style={styles.formItemInput} />
        </View>
        <View style={styles.formItem}>
          <Text style={styles.label}>password</Text>
          <View style={styles.theHidden}></View>
          <TextInput textContentType='password' keyboardType='number-pad' maxLength={11}  style={styles.formItemInput} />
        </View>
        <View style={styles.formItem}>
          <Text style={styles.label}>repassword</Text>
          <View style={styles.theHidden}></View>
          <TextInput textContentType='password' keyboardType='number-pad' maxLength={11}  style={styles.formItemInput} />
        </View>
        <TouchableOpacity>
          <View style={styles.btnStyle}>
            <Button color='#15172B'  title='Submit' />
          </View>
        </TouchableOpacity>
      </View>
      </View>
      <View style={styles.footer}>
        <Text style={styles.link}>Don’t have an account? <Text  onPress={ ()=>navigation.navigate('Login')} style={styles.jump}>SIGN UP</Text></Text>
      </View>
    </View>
  )
}
const styles = StyleSheet.create({
  wrapper: {
    flex: 1
  },
  container: {
    flex: 1,
    backgroundColor: '#212529',
    paddingLeft: pxToPt(25),
    paddingRight: pxToPt(25),
  },
  header: {
    marginTop: pxToPt(64)
  },
  title: {
    marginTop: pxToPt(30),
    fontSize: pxToPt(30),
    fontWeight: 'bold',
    color: '#FFF'
  },
  form: {
    marginTop: pxToPt(40),
  },
  
  formItem: {
    width: '100%',
    height: pxToPt(60),
    borderBottomWidth: pxToPt(0.5),
    borderColor: 'rgba(255, 255, 255, 0.1)',
    flexDirection: 'row',
    alignItems:'flex-end'
  },
  label:{
    lineHeight: pxToPt(30),
    fontSize: pxToPt(13),
    width: pxToPt(60),
    color: '#fff',
    
  },
  theHidden: {
    width:pxToPt(20),
    height: pxToPt(20),
    backgroundColor: '#212529',
    position: 'relative',
    bottom: pxToPt(-1)
  },
  formItemInput: {
    flex: 1,
    height:pxToPt(30),
    color: '#fff',
    fontSize: pxToPt(13),
    paddingLeft: pxToPt(10)
  },
  btnStyle: {
    width: pxToPt(230),
    height: pxToPt(52),
    borderRadius: pxToPt(25),
    backgroundColor: '#6AC4AC',
    marginTop: pxToPt(30),
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center'
  },
  footer: {
    height: pxToPt(60),
    width: '100%',
    position: 'absolute',
    left: 0,
    bottom: 0,
    borderTopWidth: pxToPt(0.2),
    borderTopColor: 'rgba(255, 255, 255, 0.1)',
  },
  link: {
    textAlign: 'center',
    lineHeight: pxToPt(60),
    fontSize: pxToPt(13),
    color: '#8A9EAD'
  },
  jump: {
    color: '#45E9BD'
  }
})
